<!DOCTYPE html>
<html>

<head>
    <title>日期输入框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
    <![endif]-->
    <script src="core.js"></script>
    <script src="jscolor-2.0.4/jscolor.min.js"></script>
    <link rel="stylesheet" href="flatpickr/flatpickr.min.css">
    <link rel="stylesheet" href="flatpickr/themes/material_blue.css">
    <link rel="stylesheet" href="flatpickr/plugins/confirmDate/confirmDate.css">
    <script src="flatpickr/flatpickr.min.js"></script>
    <script src="flatpickr/plugins/confirmDate/confirmDate.js"></script>
    <script src="flatpickr/l10n/zh.js"></script>
</head>

<body>
    <div class="content">
        <table class="table table-bordered table-striped table-hover">
            <tr>
                <th><span>控件ID</span><span class="label label-important">*</span></th>
                <th><span>控件名称</span><span class="label label-important">*</span></th>
            </tr>
            <tr>
                <td><input type="text" id="txtID" placeholder="必填项"></td>
                <td><input type="text" id="txtNAME" onchange="$G('txtDESCNAME').value = $G('txtNAME').value" placeholder="必填项"></td>
            </tr>
            <tr>
                <th><span>默认值</span> </th>
                <th><span>格式</span> </th>
            </tr>
            <tr>
                <td> <input type="text" id="txtVALUE" placeholder="默认值"></td>
                <td>
                    <select id="txtFormat">
                        <option value="Y-m-d">yyyy-MM-dd</option>
                        <option selected="selected" value="Y年m月d日">yyyy年MM月dd日</option>
                        <option value="Y-m-d H:i:S">yyyy-MM-dd hh:mm:ss</option>
                        <option value="Y年m月d日H:i:S">yyyy年MM月dd日hh:mm:ss</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th><span>最大值</span> </th>
                <th><span>最小值</span> </th>
            </tr>
            <tr>
                <td>
                    <input type="text" id="txtMax" placeholder="最大值">
                </td>
                <td><input type="text" id="txtMin" placeholder="最小值"></td>
            </tr>

            <tr>
                <th><span>标签</span> </th>
                <th><span>描述名</span> </th>
            </tr>
            <tr>
                <td>
                    <input type="text" id="txtTAG" placeholder="标签,多个用逗号隔开">
                </td>
                <td><input type="text" id="txtDESCNAME" placeholder="描述名"></td>
            </tr>


            <tr>
                <th><span>是否必填</span> </th>
                <th><span>是否只读</span> </th>
            </tr>
            <tr>
                <td>
                    <label class="checkbox inline"><input id="txtREQUIRED" type="checkbox" /> 必填 </label>
                </td>
                <td>
                    <label class="checkbox inline"><input id="txtREADONLY" type="checkbox" /> 只读 </label>
                </td>
            </tr>
            <tr>
                <th><span>字体颜色</span> </th>
                <th><span></span> </th>
            </tr>
            <tr>
                <td>
                    <input type="text" id="txtCOLOR" class="jscolor" placeholder="颜色" value="000000">
                </td>
                <td></td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        function initFlatpickr() {
            new Flatpickr(document.getElementById('txtMin'), {
                enableTime: true,
                enableSeconds: true,
                time_24hr: true,
                allowInput: true,
                static: true,
                "locale": "zh" // locale for this instance only
            });
            var max = new Flatpickr(document.getElementById('txtMax'), {
                enableTime: true,
                enableSeconds: true,
                time_24hr: true,
                allowInput: true,
                static: true,
                "locale": "zh" // locale for this instance only
            });

        }

        function initDefaultFlatpickr(format) {
            new Flatpickr(document.getElementById('txtVALUE'), {
                enableTime: true,
                enableSeconds: true,
                time_24hr: true,
                allowInput: true,
                static: true,
                "locale": "zh" // locale for this instance only
            });
        }
        //debugger;
        (function(UE) {
            var oNode = null,
                thePlugins = 'sdecontroldate';
            //初始化加载之前编辑的数据
            window.onload = function() {
                if (UE.plugins[thePlugins].editdom) {
                    oNode = UE.plugins[thePlugins].editdom;
                    var json = JSON.parse(oNode.getAttribute('sde-model'));
                    if (!json || json == null) {
                        alert("无法json序列化！");
                        return;
                    }
                    //json = gValue == null ? '' : gValue;
                    //gTitle = gTitle == null ? '' : gTitle;
                    $G('txtID').value = json.ID;
                    $G('txtNAME').value = json.NAME;
                    $G('txtCOLOR').value = json.COLOR;
                    $G('txtCOLOR').style.backgroundColor = "#" + json.COLOR;
                    $G('txtTAG').value = json.TAG;
                    $G('txtVALUE').value = json.VALUE;
                    $G('txtDESCNAME').value = json.DESCNAME;
                    $G('txtMax').value = json.MAX;
                    $G('txtMin').value = json.MIN;
                    $G('txtMin').value = json.MIN;

                    $G('txtFormat').value = json.FORMAT;
                    if (json.REQUIRED == 1) {
                        $G('txtREQUIRED').checked = true;
                    }
                    if (json.READONLY == 1) {
                        $G('txtREADONLY').checked = true;
                    }
                    $G('txtID').setAttribute('readonly', 'readonly');
                }
                $G('txtID').focus();
                initFlatpickr();
                initDefaultFlatpickr();
            };

            function makeHtml(json) {
                var isClear = 1,
                    show = json.DESCNAME == '' ? ' ' : json.DESCNAME;
                if (json.VALUE != '') {
                    show = json.VALUE;
                    isClear = 0;
                }
                if (json.READONLY == 1)
                    isClear = 0;
                var html = '<span class="sde-left" style="color:' +
                    ((json.READONLY == 1) ? '#808080' : '#0000FF') +
                    '" contenteditable="false">[</span><span  title="' + json.DESCNAME + '"  style="color:#' + json.COLOR + ';"  class="sde-value" ' +
                    // ((json.READONLY == 1) ? ' contenteditable="false" ' : ' contenteditable="true" ') +
                    ' contenteditable="false" ' +
                    '>' + show + '</span><span style="color:' +
                    ((json.READONLY == 1) ? '#808080' : '#0000FF') +
                    '" contenteditable="false" class="sde-right">]</span>';
                return html;
            }
            dialog.oncancel = function() {
                if (UE.plugins[thePlugins].editdom) {
                    delete UE.plugins[thePlugins].editdom;
                }
            };
            dialog.onok = function() {
                if ($G('txtID').value == '') {
                    alert('请输入控件ID');
                    return false;
                }
                if ($G('txtNAME').value == '') {
                    alert('请输入控件名称');
                    return false;
                }
                if ($G('txtMax').value !== '' && $G('txtMin').value !== '' && new Date($G('txtMax').value) < new Date($G('txtMin').value)) {
                    alert('最大值应该大于最小值！');
                    return false;
                }
                var json = {
                    ID: $G('txtID').value,
                    TYPE: 'date',
                    NAME: $G('txtNAME').value,
                    TAG: $G('txtTAG').value,
                    DESCNAME: $G('txtDESCNAME').value,
                    MAX: $G('txtMax').value,
                    MIN: $G('txtMin').value,
                    FORMAT: $G('txtFormat').value,
                    VALUE: $G('txtVALUE').value,
                    REQUIRED: 0,
                    READONLY: 0,
                    COLOR: $G('txtCOLOR').value
                };
                if ($G('txtREQUIRED').checked) {
                    json.REQUIRED = 1;
                }
                if ($G('txtREADONLY').checked) {
                    json.READONLY = 1;
                }
                var html = makeHtml(json);
                if (!oNode) {
                    try {
                        oNode = createElement('span', json.ID);
                        oNode.setAttribute('title', json.NAME);
                        oNode.setAttribute('sde-model', JSON.stringify(json));
                        oNode.setAttribute("contenteditable", "false");
                        oNode.setAttribute('class', 'sde-bg');
                        oNode.innerHTML = html; //todo:具体需要实现

                        editor.execCommand('insertHtml', "<span> </span>" + oNode.outerHTML + "<span> </span>");
                    } catch (e) {
                        try {
                            editor.execCommand('error');
                        } catch (e) {
                            alert('控件异常，请联系管理员！');
                        }
                        return false;
                    }
                } else {
                    oNode.setAttribute('title', json.NAME);
                    oNode.setAttribute('id', json.ID);
                    oNode.setAttribute('sde-model', JSON.stringify(json));
                    oNode.innerHTML = html;
                    delete UE.plugins[thePlugins].editdom;
                }
            };
        })(UE);
    </script>
</body>

</html>